import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import classNames from 'classnames'
import { delTodo, selectAll } from '../../store/actions'
import { changeStatus } from '../../store/actions/todo'

// !常（常量 => actionType）爱（Action => 通过 actionCreator 生成 Action）瑞（Reducer => 处理状态）组（组件里面 dispatch action）优秀！

export default function TodoMain() {
  const list = useSelector((state) => state.todo)
  const dispatch = useDispatch()
  // #1. 准备 currentID
  const [currentId, setCurrentId] = useState('')
  const handleDel = (id) => dispatch(delTodo(id))
  const handleChangeStatus = (id) => dispatch(changeStatus(id))

  // !确定全选的状态，根据所有的单选的状态来确定
  const isCheckAll = list.every((item) => item.done)

  // !全选操作
  const handleChangeAll = () => dispatch(selectAll(!isCheckAll))

  return (
    <section className='main'>
      <input
        id='toggle-all'
        className='toggle-all'
        type='checkbox'
        checked={isCheckAll}
        onChange={handleChangeAll}
      />
      <label htmlFor='toggle-all'>Mark all as complete</label>
      {/* // #2. 用 currentID 和 item.id 进行比较，如果是 true 就应用 editing class */}
      <ul className='todo-list'>
        {list.map((item) => (
          <li
            key={item.id}
            className={classNames({
              completed: item.done,
              editing: item.id === currentId,
            })}
          >
            <div className='view'>
              <input
                className='toggle'
                type='checkbox'
                checked={item.done}
                onChange={() => handleChangeStatus(item.id)}
              />
              {/* // #3. 双击 label 的时候，把当前的 item.id 给 currentID 就好啦 */}
              <label onDoubleClick={() => setCurrentId(item.id)}>
                {item.name}
              </label>
              <button
                className='destroy'
                onClick={() => handleDel(item.id)}
              ></button>
            </div>
            <input
              className='edit'
              value='Create a TodoMVC template'
              onChange={() => {}}
            />
          </li>
        ))}
      </ul>
    </section>
  )
}
